<template>
    <div id='login' @keydown.enter="login(form)">
        <h1>江西省万亩圩堤加固整治工程建设管理信息直报系统</h1>
        <el-form ref="form" :model="form" label-width="80px" class="loginmain">
          <!-- <el-input placeholder="用户名" v-model="form.tel" class="el-input"></el-input>
          <el-input placeholder="密码" v-model="form.passWord" class="el-input"></el-input> -->
           <el-input placeholder="请输入用户名" v-model="form.unitMessage">
             <template slot="prepend" class="labWidth">用户名</template>
           </el-input>
           <el-input placeholder="请输入密码" v-model="form.passWord" type="password" auto-complete="off">
             <template slot="prepend" class="labWidth">密码</template>
           </el-input>
          <el-button type="primary" @click="login(form)" class="el-button">登录</el-button>
        </el-form>
        <h2 class="Chrome">建议使用谷歌(Chrome)，360（极速模式），火狐，ie10+等浏览器</h2>
        <h3 class="copyright">Copyright&nbsp;2018江西省水利科学研究院|江西鄱水信息科技有限公司</h3>
      </div>
</template>
<script>
const qs = require('querystring');
export default {
 data(){
     return{
       form:{
           unitMessage:'',
           passWord:''
       },
    }
  },
  methods:{ 
            //   登入
      login(form){
          var storage = window.localStorage;
        //    this.$router.push({path:'/jectbase'})
          var _this = this;
          if(form.unitMessage==''||form.passWord==''){
              _this.$message.error('请输入用户名或密码');
          }else{
            //   this.$axios.post(`/user/login?unitMessage=南昌市水利局&passWord=123456`).then(function(res){
            this.$axios.post(`/user/login`,form).then(function(res){
               var mes = res.data.responseMessage;
               var resCode = res.data.responseCode
               if(mes=='登录成功'){
                   storage.setItem('unitMessage',_this.form.unitMessage);
                   storage.setItem('passWord',_this.form.passWord)
                   storage.setItem('level',res.data.responseData.level)
                   _this.$router.push({path:'/jectbase'})
                // _this.$notify({
                //     title: '上报及审批时间：',
                //     message: '县级请于本月13号前完成上报，市级请于本月16号前完成审批!过时将无法进行上报和审批。',
                //     duration:4000,
                //     offset: 80
                //   });

               }else{
                   _this.$message.error(mes);
               }
          }).catch(function(err){
              console.log(err)
              _this.$message.error('登陆错误，请联系管理员或重试');
          })
          }    
      },
  },
  created(){
       var storage = window.localStorage;
       this.form.unitMessage = storage.getItem('unitMessage')
       this.form.passWord = storage.getItem('passWord')
  }
}
</script>
<style>
 .loginmain .el-input-group__prepend{ width:23% } 
</style>

<style scoped>
     html,body,#login{
         width: 100%;
         height: 100%;
     }
    
     #login{
         background: #FFCAAB;
         position: relative;
         background: url('../assets/imges/bg1.jpg') no-repeat;
         background-size:100% 100%;
         min-height:650px;
     }
      h1{
         margin:0;
         padding: 0;
         color: azure;
         position: absolute;
         /* height: 200px; */
         /*left:60px; */
         top:80px;
         text-align: center;
         display: block;
         width: 100%;

     }
     .loginmain{
         position: absolute;
         width: 450px;
         height: 250px;
         background: rgba(243, 242, 242, 0.5);
         top:50%;
         margin-top:-125px; 
         left:50%;
         margin-left: -225px;
     }
     .el-input-group__prepend.labWidth{
         width: 30%
     }
     .el-input,.el-button{
         width: 80%;
         margin-top:30px;
     }
     .el-button{
         width: 80%;
         margin-top:40px;
     }
     .el-badge__content.is-fixed{
         top:28px
     }
    .copyright{
        font-size:18px;
        color:#666;
        position: absolute;
        bottom:10px;
        text-align:center;
        width:100%;
    }
    .Chrome{
        position:absolute ;
        bottom:150px;
        left: 50%;
        margin-left:-356px;
        color:#fff
    }
</style>


